<template>
  <div class="box">
     <Header title="景区"></Header>
     <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
      <van-dropdown-item v-model="value4" :options="option4" />
    </van-dropdown-menu>
      <div class="scenic-banner">
        <img src="@/assets/temporary/scenic-banner.png">
      </div>
      <div class="scenic-infoList-box">
        <router-link to="/scenicDetail" class="scenic-infoList-item" v-for="(listItem,i) in infoList" :key=i>
          <div class="img-box">
            <img :src="listItem.src" alt="">
          </div>
          <div class="item-info-box">
            <h3 class="item-info-title">{{listItem.title}}</h3>
            <p class="item-info-distance">{{listItem.distance}}</p>
            <div class="item-info-level">
              <van-icon name="star" color="#FF0000"/><van-icon name="star" color="#FF0000"/><van-icon name="star" color="#FF0000"/><van-icon name="star" color="#FF0000"/><van-icon name="star" color="#CCCCCC"/><span>{{listItem.level}}</span>
            </div>
            <div class="item-info-label">
              <span v-for="(label,b) in listItem.labelList" :key="b">{{label}}</span>
            </div>
            <div class="item-info-line">{{listItem.line}}</div>
          </div>
        </router-link>
      </div>
    <Nav></Nav>
  </div>
</template>

<script>
import Header from '@/components/Header/Header.vue'
import Nav from '@/components/Nav/Nav.vue'
import item1 from "@/assets/temporary/list-item1.png"
import item2 from "@/assets/temporary/list-item2.png"
import item3 from "@/assets/temporary/list-item3.png"
export default {
  name:'scenic',
  components:{Header,Nav},
  data(){
    return{
      value1:'01',
      value2:'11',
      value3:'21',
      value4:'31',
      option1: [
        { text: '附近', value: '01' },
        { text: '新款商品', value: '02' },
        { text: '活动商品', value: '03' }
      ],
      option2: [
        { text: '类别', value: '11'},
        { text: '好评排序', value: '12' },
        { text: '销量排序', value: '13' },
      ],
      option3: [
        { text: '排序', value: '21' },
        { text: '好评排序', value: '22' },
        { text: '销量排序', value: '23' },
      ],
      option4: [
        { text: '筛选', value: '31' },
        { text: '好评排序', value: '32' },
        { text: '销量排序', value: '33'},
      ],
      infoList:[
        {src:item1,title:'郑州黄河风景名胜区',distance:'18.1km | 惠济区',level:'4A景区',labelList:['登山','烧烤','一日游','情侣约会','赏花胜地'],line:'中华民族之魂'},{src:item2,title:'郑州文庙',distance:'14.1km | 城东路',level:'3A景区',labelList:['情侣约会','古色古香','重点文物保护单位'],line:'距离东大街地铁站（E口）步行887米'},{src:item3,title:'佛光寺',distance:'4.1km | 西流湖',level:'寺庙',labelList:['免费项目','交通便利','人气旺','设施新全'],line:'距后仓村公交站步行106米'},{src:item1,title:'郑州黄河风景名胜区',distance:'18.1km | 惠济区',level:'4A景区',labelList:['登山','烧烤','一日游','情侣约会','赏花胜地'],line:'中华民族之魂'},{src:item1,title:'郑州黄河风景名胜区',distance:'18.1km | 惠济区',level:'4A景区',labelList:['登山','烧烤','一日游','情侣约会','赏花胜地'],line:'中华民族之魂'},{src:item1,title:'郑州黄河风景名胜区',distance:'18.1km | 惠济区',level:'4A景区',labelList:['登山','烧烤','一日游','情侣约会','赏花胜地'],line:'中华民族之魂'}
        ],
    }
  }

}
</script>

<style lang="less" scope>
.scenic-banner{
    height: 150/7.5vw;
    border-radius: 8/7.5vw;
    overflow: hidden;
    >img{
      display: block;
      width: 100%;
    }
  }
.scenic-infoList-box{
      height: calc(100vh - 58.6vw);
      overflow-y: scroll;
      .scenic-infoList-item{
        height: 295/7.5vw;
        padding: 30/7.5vw 0;
        border-bottom: 1px solid #F2F2F2;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        >.img-box{
          width: 140/7.5vw;
          height: 186/7.5vw;
          border-radius: 4/7.5vw;
          margin-right: 20/7.5vw;
          >img{
            display: block;
            width: 100%;
          }
        }
        >.item-info-box{
          flex:1;
          .item-info-title{
            font-size: 36/7.5vw;
            font-weight: 500;
          }
          .item-info-distance{
            font-size: 28/7.5vw;
          }
         .item-info-level{
            font-size: 24/7.5vw;
            margin: 10/7.5vw 0;
          }
          .item-info-label{
            span{
              display: inline-block;
              padding: 0 12/7.5vw;
              margin-right: 10/7.5vw;
              background-color: #FFF6EF;
              color: #CB955C;
              font-size: 24/7.5vw;
              &:last-child{
                margin-right: 0;
              }
            }
          }
          .item-info-line{
            font-size: 28/7.5vw;
            color: #999;
            margin-top:10/7.5vw;
          }
        }
      }
    }

</style>